<!--
 * @Description: 
 * @Author: FallCicada
 * @Date: 2024-11-07 08:52:51
 * @LastEditors: Wen
 * @LastEditTime: 2024-11-13 19:49:04
 * @: 無限進步
-->

<!-- 页面主体结构 -->
<template>
  <h1>hello,vue</h1>
  <h1>模版语法</h1>
  <h2>文本插值 - 最基本的数据绑定形式 - 双大括号语法</h2>
  a:{{ a }}
  <h2>展示原始Html - 扫码支付 </h2>
  <div v-html="b"></div>
  <h2>html属性绑定</h2>
  <div id="app2">id为app2</div>
  <!-- <div v-bind:id="id3">id为app3</div> -->
  <!-- 与上面的写法具有相同的效果 -->
  <div :id="id3">id为app3</div>
  <h2>直接使用js表达式</h2>
  {{ 1 + 1 }}
  <br>
  {{ a + 1 }}
  <br>
  {{ 1 == 1 ? "yes" : "no" }}
  <h1>响应式数据</h1>
  <h2>声明响应式数据</h2>
  响应式数据在页面中的使用
  count:{{ count }}
  <br>
  响应式数据在js代码中使用
  count.value
  <!-- 一个使count自增的按钮 -->
  <button @click="count++">
    count++
  </button>
  <button @click="countAdd">
    countAdd
  </button>
  <!-- 一个使 a 自增的按钮 -->
  a:{{ a }}
  <button @click="a++">
    a++
  </button>
  <h1>类与样式的绑定</h1>
  <h2>class绑定</h2>
  <button @click="changeActive">切换active</button>
   <!-- active是类名 isActive是一个boolean值-->
  <div class="myDiv myDiv2" :class="{active:isActive,'text_success':noError}">
    class-对象方式绑定</div>
  <div :class="[isActive? 'active' : noActive,'arrClass']">class-数组方式绑定</div>
  <h2>style绑定</h2>
  <p>style写CSS属性名,使用小驼峰命名法</p>
  <p>或者'font-size'</p>
  <div :style="{color:activeColor,fontSize:fontSize+'px'}">style绑定</div>
  <button @click="changeActiveColor('green')">绿色</button>
  <button @click="changeActiveColor('blue')">蓝色</button>
  <button @click="changeActiveColor('black')">黑色</button>
  <button @click="changeActiveColor('orange')">橙色</button>

  <h1>条件渲染</h1>
  <h2>v-if v-else</h2>
  <button @click="changeFlag ">{{ flag }}</button>
  <div v-if="flag">白天</div>
  <div v-else>黑夜</div>
  <p>
    v-if不满足条件时 dom会删除这个元素
    v-show不满足条件时 dom会隐藏这个元素
    区别：
      v-if:事件监听器和子组件都会被销毁与重建
           所以频繁切换 开销比较高
           v-if是惰性的 如果初始条件时false则不会创建这个元素
      v-show:css的display 无论初始条件是false还是true这个元素都会创建
             条件变化时，元素也不会被销毁
      如果需要频繁切换,需要v-show
  </p>
  <div v-show="flag">云朵 ☁️</div>
  <h1>列表渲染</h1>
  <h2>v-for</h2>
  <div v-for="a in arr">
      <p>
        {{ a }}
      </p>
  </div>
  <div v-for="(o,index) in obj" :key="o.id">
      <p>
        {{ index }}姓名:{{ o.name }}--年龄:{{ o.age }}
      </p>
  </div>
  <!-- 生成n个指定标签 -->
  <div>
    <p v-for="n in 10">{{ n }}</p>
  </div>

  <h1>事件处理</h1>
  <h2>@v-on  简写 @ 用于监听dom事件</h2>
  <p>count:{{ count }}</p>
  <button @click="countAdd">count++</button>
  <button @click="countAddNumber(3)">count+3</button>
  <!-- 捕获原生事件对象 -->
  <button v-on:click="countAddEvent($event)">countEvent</button>
  <button v-on:click="countAdd">count++</button>

  <!-- 键盘事件 -->
   <div>
   <input @keyup.enter="login" type="text">
   <input @keyup.alt.enter="enter" type="text">
   <!-- ctrl 点击 -->
   <!-- <input @keyup.crtil="" type="text"> -->
    <!-- left .right .middle -->
  </div>
  <h1>表单输入与绑定</h1>
  <h2>基本用法</h2>
  用户名:{{ username }};
  密码:{{ password }};
  管理员:{{ checked }};
  性别:{{ gender }}
  爱好:{{ likes }}
  <br>
  用户名 <input v-model="username" type="text" placeholder="请输入用户名">
  密码<input v-model="password" type="text" placeholder="请输入密码"  @keyup.enter="login">
  <br>
  管理员<input type="checkbox" v-model="checked">
  男<input type="radio" value="男" v-model="gender">
  女<input type="radio" value="女" v-model="gender">
  <br>
  <select v-model="likes" multiple>
    <!-- 单质属性 -->
     <!-- disabled="true" -->
    <option disabled value="">请选择你的爱好</option>
    <option v-for="i in items" :value="i.value">{{ i.name }}</option>
    <!-- <option value="网球">网球</option>
    <option value="游泳">游泳</option>
    <option value="羽毛球">羽毛球</option> -->
  </select>
  <button @click="login">登录</button>

  <!-- 自定义组件的使用 -->
     <!-- 控制子组件的字体大小 -->
     <button @click="addFontSize">字体变大</button>
     <button @click="reduceFontSize">字体缩小</button>
     <CountAdd  ref="childRef" num="5"></CountAdd>
     <!-- 组件传参 -->
     <!-- <CountAdd num="10"/> -->
     <!-- 事件监听 -->

</template>

<!-- 写js代码 -->
<script setup>
// 声明响应式数据
import { onMounted, ref,onUnmounted,onUpdated} from 'vue'

// 获取子组件
const childRef = ref(null);
const childRef2 = ref(null);
// 导入自定义组件
import CountAdd from '@/components/CountAdd/CountAdd.vue'
const arr=["苹果","香蕉","橘子"];
const obj=[
  {id: 1,name:"张三",age:18},
  {id: 2,name:"李四",age:19},
  {id: 3,name:"王五",age:20}
]
// ref()函数 用于声明响应式状态
const username = ref("");
const password = ref("");
const checked = ref(true);
const gender = ref("男");
const likes = ref([]);
const items =ref([]);
// 父组件中的方法
// 增加字体大小
function addFontSize(){
  console.log('🤡 CC - addFontSize - 增加子组件的字体大小');
  if (childRef.value) {
    console.log('🤡 CC - addFontSize - childRef.value:',childRef.value);
    // childRef.value
    childRef.value.childAddFont();
  }
}
// 减少字体大小
function reduceFontSize(){
  console.log('🤡 CC - reduceFontSize - 缩小子组件的字体大小',);
  if (childRef.value) {
    console.log('🤡 CC - reduceFontSize - childRef.value:', childRef.value);
    // childRef.value
    childRef.value.childReduceFont();
  }
}
// 模拟网络请求
getItems();
// 方法调用
function getItems(){
  // 发送网络请求 获取到了数据
  var timeoutId = setTimeout(()=>{
  items.value=[
    {value:"篮球",name:"篮球"},
    {value:"足球",name:"足球"},
    {value:"羽毛球",name:"羽毛球"},
  ]
  },5000)
  console.log("🚀 ~ timeoutId ~ setTimeout:", setTimeout)
}
const isActive = ref(true);
const noError = ref(true);
const activeColor = ref("hotpink");
const fontSize="30";
const flag=ref(true);

// 声明一个初始值为0的响应式数据count
const count = ref(0);
//  响应式数据如果在js中使用 需要.value访问
console.log('🤡 CC - count:', count);
 console.log('🤡 CC - count.value:', count.value);
 count.value++
 console.log('🤡 CC - count.value:', count.value);
// countAdd方法的声明
function countAdd () {
  count.value++;
}
function changeActive(){
  isActive.value=!isActive.value;
}
function changeActiveColor(color){
activeColor.value=color;
}
function changeFlag(){
  flag.value=!flag.value;
}
function countAddNumber(num){
  count.value+=num;
}
function countAddEvent(event){
  console.log('🤡 CC - event:', event);
}
function login(){
  // alert("正在登录");
  // admin 123
  if((username.value=="admin")&&(password.value=="123")){
    alert("登录成功");
  }else{
    alert("登录失败");
  }
}
function enter(){
  alert("换行");
}
// 声明一个变量a并且初始化
var a = 10;
var b = '<span style="color:red;">这个是一个文字为红色的span标签</span>';
var id3 = 'app3';

onMounted(
  ()=>{
  //alert("onMounted");
console.log("🚀 ~ onMounted:")
})
onUpdated(() => {
  console.log('🤡 CC - onUpdated - onUpdated');
})
onUnmounted(() => {
  // alert('🤡 CC - onUnmounted - onUnmounted');
  // 组件被卸载 会触发 
  // 清除定时器 事件监听等内容
  clearTimeout(timeoutId);
  // clearInterval(intervalId);
})

</script>

<!-- 页面样式 -->
<style scoped>
.active{
  color: red;
  font-size: 26px;
}
.noActive{
  color:orange;
}
</style>